Gantt Grouping

Use the gantt view grouping strategy to visually display hierarchical relationships. The gantt view provides a visual overview of the start and finish dates. It maintains the timescale based tasks and deliverables on a daily, weekly, monthly, or yearly basis.

Use the following steps to implement the gantt view grouping strategy.

Sample Code

1. Add the following references after the Dataview reference.

   <link rel="stylesheet" href="[Your Script Path]/gc.spread.views.gantt.10.1.1.css">
   <script src="[Your Script Path]/gc.spread.views.gantt.10.1.1.min.js" type="text/javascript"></script>
       <script src="data/ganttEvent.js" type="text/javascript"></script>

2. Add a div tag within the body tag to include the DOM element as the container in the page.

   <div id="grid1" style="height:100%"></div><template id="popupTemplate" style="display: none">
       <div class="dialog-body">
           <div>
               <div class="dialog-ids">
                   <div class="dialog-header">start date:</div>
                   <input type="date" class="dialog-content" data-column="start" />
               </div>
               <div class="dialog-ids" style="margin-left:40px">
                   <div class="dialog-header">end date:</div>
                   <input type="date" class="dialog-content" data-column="end" />
               </div>
           </div>
           <div class="dialog-header">description:</div>
           <textarea class="dialog-text" style="height:60px;font-style:italic;" data-column="description"></textarea>
           <div class="dialog-header">resources:</div>
           <textarea class="dialog-text" style="height:28px;" data-column="resources"></textarea>
       </div>
   </template>

3. Add the column definition.

   var columns = [{
               id: 'id',
               caption: 'Id',
               dataField: 'id',
               width: 80
           }, {
               id: 'start',
               caption: 'Start',
               dataField: 'start',
               width: 100,
               dataType: 'date',
               format: 'mmm dd,yyyy'
           }, {
               id: 'end',
               caption: 'End',
               dataField: 'end',
               width: 100,
               dataType: 'date',
               format: 'mmm dd,yyyy'
           }, {
               id: 'gantt',
               ganttColumn: {
                   timeLineScale: 'month',
                   scale: 300,
                   start: 'start',
                   end: 'end',
                   text: 'description'
               },
               width: '*'
           }, {
               id: 'description',
               caption: 'Description',
               dataField: 'description',
               visible: false
           }, {
               id: 'resources',
               caption: 'Resources',
               dataField: 'resources',
               visible: false
           }, {
               id: 'predecessorID',
               caption: 'predecessorID',
               dataField: 'predecessorID',
               visible: false,
               allowEditing: false
           }, {
               id: 'parentID',
               caption: 'parentID',
               dataField: 'parentID',
               visible: false,
               allowEditing: false
       }];

4. Initialize the code by calling the Grid ID from the DIV tag.

   var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
               colHeaderHeight: 48,
               rowHeight: 48,
               allowEditing: true,
               editRowTemplate: '#popupTemplate',
               editMode: 'popup',
               hierarchy: {
                   keyField: 'id',
                   parentField: 'parentID',
                   collapsed: false,
                   column: 'id',
                   footer: {
                       visible: false
                   }
               }
       }));